import 'package:flutter/material.dart';

class WarpCom extends StatefulWidget {
  @override
  _WarpComState createState() => _WarpComState();
}

class _WarpComState extends State<WarpCom> {
  List<Widget> list;

  @override
  void initState() {
    super.initState();
    list = List<Widget>()..add(buildAddButton());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('流式布局'),
      ),
      body: Center(
        child: Opacity(
          opacity: 0.8,
          child: Container(
            width: MediaQuery.of(context).size.width, // 屏幕宽度
            height: MediaQuery.of(context).size.height, // 屏幕高度
            color: Colors.grey,
            child: Wrap(
              // 流式布局
              children: list,
              spacing: 5.0,
            ),
          ),
        ),
      ),
    );
  }

  Widget buildAddButton() {
    return GestureDetector(
      // 手势识别
      onTap: () {
        if (list.length < 9) {
          setState(() {
            list.insert(list.length - 1, buildPhoto());
          });
        }
      },
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          height: 100.0,
          width: 100.0,
          color: Colors.black,
          child: Icon(Icons.add),
        ),
      ),
    );
  }

  Widget buildPhoto() {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: Container(
        height: 100.0,
        width: 100.0,
        color: Colors.yellow,
        child: Icon(Icons.account_circle),
      ),
    );
  }
}
